import React, { useState, useReducer } from "react";
import { Breadcrumb } from "antd";
import { HomeOutlined, UserOutlined } from "@ant-design/icons";
const initialState = { count: 0 };
class Test extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      msg: 123,
    };
  }
  componentDidMount() {
    this.setState({
      msg: this.state.msg + 1,
    });
    this.setState((prev) => {
      console.log(prev);
    });
  }
  render() {
    return <div>1234{this.state.msg}</div>;
  }
}
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      console.log(action.payload);
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}
function Child(props) {
  return (
    <div>
      {props.count}
      <button
        onClick={() => {
          props.dis({ type: "increment" });
        }}
      >
        add
      </button>
    </div>
  );
}
function Counter() {
  // 返回值：最新的state和dispatch函数 把state dispatch传给组件 可以 全局改变 组件共享
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      Count: {state.count}
      <Child count={state.count} dis={dispatch} />
      <button
        onClick={() =>
          dispatch({ type: "increment", payload: { book: { a: 1 } } })
        }
      >
        +
      </button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
}

const ThemeContext = React.createContext("light");
class Text extends React.Component {
  componentDidMount() {
    console.log(this.context);
  }
  render() {
    return <div>123</div>;
  }
}
Text.contextType = ThemeContext;
function List() {
  const [state, dispatch] = useReducer(reducer, initialState);
  let list = [
    {
      id: "1",
      name: "裤子",
      text: "",
      price: 100,
      number: 0,
      judeg: false,
    },
    {
      id: "2",
      name: "鞋子",
      text: "",
      price: 100,
      number: 0,
      judeg: false,
    },
  ];
  let [objList, setObjList] = useState(list);
  let [box1, setBox] = useState(false);
  let setList = (e, id) => {
    console.log(id);
    console.log(objList);
    let list = objList.map((res) => {
      if (res.id === id) {
        res.number = Number.parseInt(e.target.value);
      }
      return res;
    });
    setObjList(list);
  }; // 输入
  let add = (id, judge = false) => {
    let list = objList.map((res) => {
      if (res.id === id) {
        if (judge) {
          // 判断 增加 还是 减少 按钮
          res.number = res.number - 1;
        } else {
          res.number = res.number + 1;
        }
      }
      return res;
    });
    console.log(list);
    setObjList(list);
  }; // 新增
  let total = () => {
    let num = 0;
    objList.map((res) => {
      if (res.judeg) {
        num = num + res.price * res.number;
      } else {
        return 0;
      }
    });
    return num;
  }; // 总价
  let box = (id, judeg) => {
    let list = objList.map((res) => {
      if (res.id === id) {
        res.judeg = !judeg;
      }
      return res;
    });
    setObjList(list);
  }; // 单选
  let all = (box) => {
    setBox(box);
    if (box) {
      let list = objList.map((res) => {
        res.judeg = true;
        return res;
      });
      setObjList(list);
    } else {
      let list = objList.map((res) => {
        res.judeg = false;
        return res;
      });
      setObjList(list);
    }
  }; // 全选
  return (
    <div>
      <Text />
      <Test />
      {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <Counter />
      {objList.map((res) => {
        return (
          <div key={res.id}>
            <input
              type="checkBox"
              checked={res.judeg}
              onChange={() => {
                box(res.id, res.judeg);
              }}
            />
            <span>{res.name}</span>
            <input
              value={res.number + ""}
              onChange={(e) => {
                setList(e, res.id);
              }}
            />
            <span>{res.id}</span>
            <span>{res.text}</span>
            <span>单价：{res.price}</span>
            <button
              onClick={() => {
                add(res.id);
              }}
            >
              增加
            </button>
            <button
              onClick={() => {
                add(res.id, true);
              }}
            >
              减少
            </button>
          </div>
        );
      })}
      <div>
        总价：{total()}
        <input
          type="checkBox"
          checked={box1}
          onChange={() => {
            all(!box1);
          }}
        />
      </div>
    </div>
  );
}
function BreadBox() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="/">
        <HomeOutlined />
      </Breadcrumb.Item>
      <Breadcrumb.Item href="/sub1">
        <UserOutlined />
        <span>Application List</span>
      </Breadcrumb.Item>
      <Breadcrumb.Item>Application</Breadcrumb.Item>
    </Breadcrumb>
  );
}
class RigthTop extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      a: 1,
    };
  }
  componentDidMount() {
    this.setState({
      a: this.state.a + 1,
    });
    this.setState({
      a: this.state.a + 2,
    });
    setTimeout(() => {
      this.setState({
        a: this.state.a + 1,
      });
      this.setState({
        a: this.state.a + 1,
      });
    });
  }
  render() {
    return (
      <div>
        {this.state.a}
        <ThemeContext.Provider value="hello">
          <List />
        </ThemeContext.Provider>
        <BreadBox />
      </div>
    );
  }
}
export default RigthTop;
